<template>
    <div>
        <van-form @submit="onSubmit" @failed="onFailed">
            <div class="form_box">
                <div class="form_item">
                    <div class="title">教育经历</div>
                    <div class="form_item_content">
                        <div class="item_title">学校名称</div>
                        <div class="item_input">
                            <van-field class="input_content" name="schoolName" :rules="[{ required: true, message: '' }]"
                                v-model="form.schoolName" placeholder="请输入学校名称" />
                        </div>
                    </div>
                    <div class="form_item_content">
                        <div class="item_title">最高学历</div>
                        <div class="item_input">
                            <van-field class="input_content" readonly clickable name="educationalBackground"
                                :rules="[{ required: true, message: '' }]" v-model="form.educationalBackground"
                                placeholder="请选择最高学历" @click="educationShowPicker = true" />
                            <van-popup v-model="educationShowPicker" position="bottom">
                                <van-picker show-toolbar value-key="label" :columns="education"
                                    @confirm="pickerConfirm($event, 'educationalBackground', 'educationShowPicker')"
                                    @cancel="educationShowPicker = false" />
                            </van-popup>
                            <div class="select_btn">请选择</div>
                        </div>
                    </div>
                    <div class="form_item_content flex_item">
                        <div class="item_title">全日制/非全日制</div>
                        <div class="item_input">
                            <!-- <van-field class="input_content" readonly clickable placeholder="" /> -->
                            <van-radio-group name="fullTime" v-model="form.fullTime"
                                :rules="[{ required: true, message: '请选择是否全日制' }]" direction="horizontal">
                                <van-radio name="0">全日制</van-radio>
                                <van-radio name="1">非全日制</van-radio>
                            </van-radio-group>
                        </div>
                    </div>
                    <div class="form_item_content flex_item">
                        <div class="item_title">学位证书</div>
                        <div class="item_input">
                            <!-- <van-field class="input_content" readonly clickable placeholder="" /> -->
                            <van-radio-group v-model="form.diploma" name="diploma" direction="horizontal">
                                <van-radio name="1">有</van-radio>
                                <van-radio name="0">无</van-radio>
                            </van-radio-group>
                        </div>
                    </div>
                    <div class="form_item_content">
                        <div class="item_title">所学专业</div>
                        <div class="item_input">
                            <van-field class="input_content" name="major" :rules="[{ required: true, message: '' }]"
                                v-model="form.major" placeholder="请输入所学专业" />
                        </div>
                    </div>

                    <div class="form_item_content l_form_item_content">
                        <div class="item_title">毕业时间 <div>
                                <van-checkbox @change="checkboxChange" style="margin-left: 0.14rem;" v-model="nowTime"
                                    :checked="form.graduateTime == '至今'">至今</van-checkbox>
                            </div>
                        </div>
                        <div class="item_input">
                            <van-field class="input_item input_small" name="intakeTime"
                                :rules="[{ required: true, message: '' }]" v-model="form.intakeTime" readonly clickable
                                @click="dateShow = true" placeholder="开始时间" />
                            <van-popup v-model="dateShow" position="bottom">
                                <van-datetime-picker type="date" @cancel="dateShow = false" 
                                    @confirm="onDateConfirm($event, 'intakeTime', 'dateShow')" title="选择年月日" />
                            </van-popup>
                            <span class="line">-</span>
                            <van-field class="input_item input_small" name="graduateTime"
                                :rules="[{ required: form.graduateTime != '至今', message: '' }]" v-model="form.graduateTime"
                                readonly clickable @click="endDateShow = true" placeholder="结束时间" />
                            <van-popup v-model="endDateShow" position="bottom">
                                <van-datetime-picker type="date" @cancel="endDateShow = false"
                                    @confirm="onDateConfirm($event, 'graduateTime', 'endDateShow')" />

                            </van-popup>
                        </div>
                    </div>
                    <div class="form_item_content" v-if="nowTime == true">
                        <div class="item_title">所在年级</div>
                        <div class="item_input">
                            <van-field class="input_content" :rules="[{ required: form.graduateTime == '至今', message: '' }]"
                                v-model="form.gradeName" readonly clickable name="gradeName" placeholder="请选择所在年级"
                                @click="gradeShowPicker = true" />
                            <van-popup v-model="gradeShowPicker" position="bottom">
                                <van-picker show-toolbar value-key="label" :columns="gradeColumns" @confirm="onGradeConfirm"
                                    @cancel="gradeShowPicker = false" />
                            </van-popup>
                            <div class="select_btn">请选择</div>
                        </div>
                    </div>
                    <div class="form_item_content flex_item">
                        <div class="item_title">是否有海外学习经历</div>
                        <div class="item_input">
                            <!-- <van-field class="input_content" v readonly clickable /> -->
                            <van-radio-group v-model="form.isOverseasStudy" name="isOverseasStudy" placeholder=""
                                :rules="[{ required: true, message: '请选择是否海外经历' }]" direction="horizontal">
                                <van-radio name="有">有</van-radio>
                                <van-radio name="无">无</van-radio>
                            </van-radio-group>
                        </div>
                    </div>
                </div>
            </div>
            <div class="show_tast">请填写国家承认的教育经历，非培训经历</div>

            <div style="margin: 0 0.10rem; padding-bottom: 0.1rem;">
                <van-button class="submmit_btn" round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { educationOptions } from "@/utils/frontDataDict.js";
import moment from 'moment'
export default {
    // 组件名称
    name: "demo",
    // 组件参数 接收来自父组件的数据
    props: {
        itemData: {
            type: Object,
            default: () => { }
        }
    },

    // 局部注册的组件
    components: {
    },
    data() {
        return {
            gradeShowPicker: false,
            educationShowPicker: false,
            dateShow: false,
            endDateShow: false,
            value: '',
            education: [], // 学历
            gradeColumns: [], // 年级
            nowTime: false,
            postsStatus: [
                {
                    label: '正在实习',
                    children: [
                        { label: '随时入职', value: '随时入职' },
                        { label: '2周内入职', value: '2周内入职' },
                        { label: '时间待定', value: '时间待定' },
                    ]
                },
                {
                    label: '暂无实习',
                    children: [
                        { label: '随时入职', value: '随时入职' },
                        { label: '2周内入职', value: '2周内入职' },
                        { label: '时间待定', value: '时间待定' },
                    ]
                }
            ],
            form: {
                educationalBackground: '', // 学历
                intakeTime: '',
                diploma: '', // 证书
                grade: '',
                graduateTime: '',
                major: '', // 专业
                schoolName: '',
                isOverseasStudy: '', // 海外
            }

        }
    },
    created() {
        this.seteducationOptions()

    },
    mounted() {

        this.setForm()
    },
    methods: {
        setForm() {

            setTimeout(() => {
                console.log(this.itemData)
                this.form = this.itemData
                if (this.itemData.isAdd == 'add') {
                    return
                }

                this.form.educationalBackground && this.education.forEach(item => {
                    console.log(this.education)
                    if (item.label == this.form.educationalBackground) {
                        this.gradeColumns = item.last
                        item.last.forEach(iitem => {
                            if (iitem.value == this.form.grade) {
                                this.form.gradeName = iitem.label
                                this.form.grade = iitem.value
                            }
                        })
                    }
                })
                console.log(this.itemData, this.itemData.graduateTime)
                if (this.itemData.graduateTime == '至今') {
                    this.nowTime = true
                }
            });


        },
        checkboxChange(e, v, o) {

            if (e) {
                this.form.graduateTime = '至今'
            } else {
                this.form.graduateTime= this.form.graduateTime == '至今' ? '': this.form.graduateTime
                this.form.gradeName = ''
                this.form.gradeValue = ''
            }
        },
        onConfirm(val, va, vvv) {
            this.form.targetCity = val[1]
            this.form.cityIndex = va
            console.log(val, va, vvv)
            this.cityShowPicker = false
        },
        seteducationOptions() {
            this.education = educationOptions.map(item => {
                return {
                    label: item.label,
                    value: item.value,
                    // children: item.this.education
                    last: item.children
                }
            }).filter(item => item.value > 0)
            console.log(this.education, 'this.education')
        },
        onSubmit(val) {
            console.log(val)
            console.log(this.form)
            // let starTime = new Date(this.form.intakeTime).getTime()
            // let endTime = new Date(this.form.intakeTime).getTime()
            // if(new Date(this.form.intakeTime).getTime())
            this.$emit("onItemData", JSON.stringify(this.form))
        },
        onFailed(errorInfo) {
            console.log('failed', errorInfo);
        },
        //学历
        pickerConfirm(e, formItem, showKey) {
            // 清空年级
            this.form.gradeName = ''
            this.form.grade = ''
            this.form[formItem] = e.label
            this[showKey] = false
            // 学历对应的年级
            if (showKey == 'educationShowPicker') {
                console.log('------')
                this.gradeColumns = e.last
            }
            console.log(this.education)
            console.log(e, formItem, showKey)
        },
        // 时间组件
        onDateConfirm(e, formItem, dataShow) {
            console.log(e, formItem, dataShow)
            if (dataShow == "endDateShow") {
                this.nowTime=false
            }
            this.form[formItem] = moment(e).format("YYYY-MM-DD")
            this[dataShow] = false
            console.log(moment(e[0]).format("YYYY-MM-DD"))

        },
        // 年级
        onGradeConfirm(e, i, o, v) {
            console.log(e, i, o, v)
            this.form.gradeName = e.label
            this.form.grade = e.value
            console.log(e, i, o, v)
            this.gradeShowPicker = false
        }
    }
}
</script>

<style lang="less" scoped>
.form_box {
    padding: 0 0.10rem;

    .form_item {
        .title {
            font-size: 0.16rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            margin-top: 0.15rem;
            color: #37383D;
            line-height: 0.22rem;
        }

        .form_item_content {
            border-bottom: 1px solid #E6E6E6;
            &.l_form_item_content{
                border-bottom: 0;
            }
             &.flex_item{
                display: flex;
                justify-content: space-between;
                align-content: center;
                .item_title{
                margin-bottom: 0.15rem;

                }
            }
            .item_title {
                display: flex;
                font-size: 0.14rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                margin-top: 0.15rem;
                color: #37383D;
                line-height: 0.2rem;
                margin-bottom: 0.1rem;

            }

            .item_input {
                display: flex;
                align-items: center;

                .input_content {
                    flex: 1;
                    font-size: 0.13rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #B0B0B0;
                    padding-left: 0;
                    line-height: 0.18rem;
                }

                .select_btn {
                    font-size: 0.13rem;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #2F8EFE;
                    line-height: 0.18rem;

                }

                .input_item {
                    flex: 1;

                }

                .input_small {
                    border-radius: 2px;
                    border: 1px solid #F0F0F0;
                }

                .line {
                    width: 0.20rem;
                    text-align: center;
                }
            }

        }

    }

}

.show_tast {
    height: 18px;
    text-align: center;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FC9C21;
    line-height: 18px;
    margin-top: 1.3rem;
    margin-bottom: 0.15rem;
}

.submmit_btn {
    height: 55px;
    background: #3D6CB0;
    border-radius: 5px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 25px;

}

/*  重写 radio 样式  */
/* 未选中的 背景样式 */
// radio .wx-radio-input{
//   border-radius: 50%;/* 圆角 */
//   width: 25rpx;
//   height: 25rpx;
// }
// /* 选中后的 背景样式 （无背景 紫色边框 可根据UI需求自己修改） */
// radio .wx-radio-input.wx-radio-input-checked{
//   border:1px solid  #9E50F2;
//   background:  transparent;
// }
// /* 选中后的 对勾样式 （紫色圆圈 可根据UI需求自己修改） */
// radio .wx-radio-input.wx-radio-input-checked::before{
//   border-radius: 50%;/* 圆角 */
//   width: 18rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
//   height: 18rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
//   line-height: 40rpx;
//   text-align: center;
//   background-color: #9E50F2;
//   border-radius: 50%;
//   font-size:0rpx; /* 对勾大小 0rpx */
//   color:#9E50F2; /* 对勾颜色  */
//   transform:translate(-50%, -50%) scale(1);
//   -webkit-transform:translate(-50%, -50%) scale(1);
// }

// 去掉原本的勾选样式
// /deep/.van-radio__icon .van-icon,
//     .van-checkbox__icon .van-icon-success:before {
//         content: '';
//        border: 1px solid #c60c20;
//       background-color: #c60c20;
//       background-clip: content-box;
//       width: 5px;
//     }
/deep/.van-checkbox__icon--checked .van-icon {
    border: 0.01rem solid #3D6CB0;
    background-color: #3D6CB0;
    background-clip: content-box;
    padding: 0.03rem;
}

/deep/.van-icon-success:before {
    content: '';
    //    border: 1px solid #c60c20;
    //   background-color: #c60c20;
    //   background-clip: content-box;
    //   width: 5px;
}

/deep/.van-radio__label {
    margin-left: 0.11rem;
    color: #323233;
    line-height: 0.2rem;
}

/deep/.van-radio__icon--checked .van-icon {
    border: 0.01rem solid #3D6CB0;
    background-color: #3D6CB0;
    background-clip: content-box;
    //   width: 5px;
    padding: 0.03rem;
}

/deep/.van-radio__icon--checked+.van-radio__label,
.van-checkbox__icon--checked+.van-checkbox__label {
    color: #3D6CB0;
    // background-color: #ecf0ff;
}
</style>